<template>
  <a-card class="h-100 ax_plain_card" :bordered="false" :body-style="{ height: '100%' }">
    <a-flex class="settings h-100" :gap="8">
      <a-card :body-style="{ height: '100%' }">
        <a-menu v-model:selectedKeys="selectedKeys">
          <a-menu-item v-for="item in nav" :key="item.id" @click="selectNav(item)">
            {{ item.title }}
            <template #icon>
              <component :is="item.icon"></component>
            </template>
          </a-menu-item>
        </a-menu>
      </a-card>
      <div class="content flex-1">
        <component :is="current.component"></component>
      </div>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import { AreaChartOutlined, BgColorsOutlined, WarningOutlined } from '@ant-design/icons-vue';
import { nanoid } from 'nanoid';
import ThemeVue from './theme/Theme.vue';
import Wallpaper from './wallpaper/Wallpaper.vue';
import Net from './net/Net.vue';

interface Nav {
  title: string;
  icon: any;
  id: string;
  component: any;
}
const selectedKeys = ref(['theme']);

const props = defineProps<{
  data?: string;
}>();

const nav: Nav[] = [
  {
    title: '外观设置',
    icon: markRaw(BgColorsOutlined),
    id: 'theme',
    component: markRaw(ThemeVue),
  },
  {
    title: '壁纸设置',
    icon: markRaw(AreaChartOutlined),
    id: nanoid(),
    component: markRaw(Wallpaper),
  },
  {
    title: '缓存设置',
    icon: markRaw(WarningOutlined),
    id: nanoid(),
    component: markRaw(Net),
  },
];

const current = ref<Nav>(nav[0]);

const selectNav = (item: Nav) => {
  current.value = item;
};

onMounted(() => {
  if (props.data) {
    nav.forEach(e => {
      if (e.id === props.data) {
        current.value = e;
        selectedKeys.value = [props.data];
      }
    });
  }
});
</script>

<style lang="scss" scoped>
:deep(.ant-menu) {
  overflow: hidden;
  width: 140px;
  height: 100%;
  border-right: none !important;
  &::-webkit-scrollbar {
    display: none;
  }
}
.content {
  overflow: hidden;
  overflow-y: auto;
}
</style>
